<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>layui</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/StudentSelect.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/search.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.js}"></script>
    <link rel="stylesheet" th:href="@{/css/daohang.css}" />
    <script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

</head>
<body bgcolor="">
<!--轮播图片-->
<div class="layui-carousel" id="test1">
    <div carousel-item="">
        <div><img src="image/lun.jpg" width="100%" height="100%"/></div>
        <div><img src="image/lun2.jpg" width="100%" height="100%"/></div>
        <div><img src="image/13.jpg" width="100%" height="120%"/></div>
    </div>
</div>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'none' //始终显示箭头
            , width: '1080px'
            , height: '150px'
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
<fieldset class="layui-elem-field layui-field-title">
    <legend><span class="" style="font-size: 14px">
        <a href="/dor/indexdemo">首页<span class="layui-box">&gt;</span></a>
  <span>学生管理<span class="layui-box">&gt;</span></span>
  <span>本班学生<span class="layui-box">&gt;</span></span>
</span>
    </legend>
</fieldset>

<div style="margin-bottom: 5px;">

</div>

<div class="layui-btn-group demoTable">
</div>

<div style="display: flex" class="demoTable">
</div>

<!-- class="layui-table" lay-data="{width: '100%', height:'800px', url:'/dor/stu', page:true, id:'idTest'}"-->
<!--lay-filter="demo"-->
<table id="LAY_table_user" lay-filter="demo">
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-mini" lay-event="detail" onclick="look()">查看编辑</a>
    <!--  <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>-->
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>

<!--<div class="look_div" hidden="hidden" id="look_div">
    <div class="layui-layer-title" style="cursor: move;">会员详情</div>
    <div class="layui-layer-setwin" ><a class="layui-layer-ico layui-layer-close layui-layer-close1 out_bg"  href="javascript:;"></a></div>
    <form class="layui-form layui-form-pane" action="" method="put">
        <div  class="layui-anim layui-anim-scale">
            <div style="display: flex;align-items: center;">
                <div class="layui-form-item">
                    <label class="layui-form-label">学号</label>
                    <div class="layui-input-block">
                        <input type="text" id="stu_id" name="title" autocomplete="off" placeholder="请输入学号" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" id="stuname" placeholder="请输入姓名" autocomplete="off" class="layui-input"/>
                    </div>
                </div>
            </div>

            <div style="display: flex;align-items: center;">
                <div class="layui-form-item">
                    <label class="layui-form-label">寝室号</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="roomid" placeholder="请输入寝室号" autocomplete="off"
                               class="layui-input"/>
                    </div>
                </div>


                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input type="radio" id="nan" name="sex" value="男" title="男"/>
                        <input type="radio" id="nv" name="sex" value="女" title="女"/>
                    </div>
                </div>
            </div>

            <div style="display: flex;align-items: center;">
                <div class="layui-form-item">
                    <label class="layui-form-label">班级</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="stucla" placeholder="请输入班级" autocomplete="off" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">学院</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="stuacad" placeholder="请输入学院" autocomplete="off"
                               class="layui-input"/>
                    </div>
                </div>
            </div>

            <div style="display: flex;align-items: center;">
                <div class="layui-form-item">
                    <label class="layui-form-label">手机</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="stuphone" placeholder="请输入手机" autocomplete="off"
                               class="layui-input"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">验证日期</label>
                    <div class="layui-input-block">
                        <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd"
                               autocomplete="off" class="layui-input"/>
                    </div>
                </div>
            </div>

            <div style="display: flex;align-items: center;">
                <div class="layui-form-item">
                    <label class="layui-form-label">积分</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="stugrade" placeholder="请输入积分" autocomplete="off"
                               class="layui-input"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" id="stupassword" placeholder="请输入密码" autocomplete="off"
                               class="layui-input"/>
                    </div>
                    &lt;!&ndash; <div class="layui-form-mid layui-word-aux">请务必填写用户名</div>&ndash;&gt;
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">行内选择框</label>
                <div class="layui-input-inline">
                    <select name="quiz1">
                        <option value="">请选择省</option>
                        <option value="浙江" selected="">浙江省</option>
                        <option value="你的工号">江西省</option>
                        <option value="你最喜欢的老师">福建省</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
            </div>
        </div>
    </form>
</div>-->

<div class="out_bg" hidden="hidden"></div>


<!--<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>-->


<script type="text/javascript" th:src="@{/js/StudentSelect.js}"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->


<script>
    var searchSelectText
    $('.search_select').on('change', function () {
        searchSelectText = $(this).val()

        console.log(searchSelectText);
    })
    layui.use('table', function(){
        var table = layui.table;
        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            ,url: '/dor/getRelativeStu?type=cla'
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'stu_id', title: 'ID', width:120, sort: true, fixed: true}
                ,{field:'room_id', title: '寝室编号', width:100}
                ,{field:'name', title: '姓名', width:100, sort: true}
                ,{field:'sex', title: '性别', width:80}
                ,{field:'acad', title: '学院', width:120}
                ,{field:'pro', title: '籍贯', sort: true, width:100}
                ,{field:'cla', title: '班级', width:120}
             /*   ,{field:'', title: '操作', sort: true, width:135, toolbar: '#barDemo'}*/
            ]]
            ,id: 'LAY_table_user'
            ,page: true
            ,height: 0
        });

        var $ = layui.$, active = {
            reload: function(){
                var query = $('.search_input').val()

                table.reload('LAY_table_user', {
                    where: {
                        target: searchSelectText,
                        searchText: query
                    }
                });
            }
        };

        $('.demoTable .search_btn').on('click', function(e){
            e.preventDefault()
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //监听表格复选框选择
        table.on('checkbox(demo)', function (obj) {
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;

            console.log(obj.data);
            $('#stu_id').val(obj.data.stu_id);
            $('#stuname').val(obj.data.name);
            $('#roomid').val(obj.data.room_id);
            $('#stuacad').val(obj.data.acad);
            $('#stucla').val(obj.data.cla);
            $('#stugrade').val(obj.data.grade);
            $('#stupassword').val(obj.data.password);
            $('#stuphone').val(obj.data.phone);
            if (obj.data.sex == '男') {
                console.log("yunxin");
                /*$('#nan').removeAttr('checked');
                 $('#nan').prop('checked', false);*/
                $('#nan').prop("checked", true);
            } else {
                $('#nv').attr('checked', 'checked');
            }

            /*  $('#roomid').val(obj.data.room_id);
             $('#roomid').val(obj.data.room_id);
             $('#roomid').val(obj.data.room_id);*/


            if (obj.event === 'detail') {
                layer.msg('ID：' + data.stu_id + ' 的查看操作');
                console.log('hdfdhjdjhjhjhdfddfhhdhdd');
            } else if (obj.event === 'del') {


                layer.confirm('确认删除该学生信息', function (index) {
                    $.ajax({
                        type: "DELETE",
                        url: "/dor/stu/" + obj.data.stu_id,
                        data: "{}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) { // Play with response returned in JSON format
                            return true;
                        },
                        error: function (msg) {
                            return false;
                        }
                    });

                    obj.del();
                    layer.close(index);
                    // console.log('年后');

                });
            } else if (obj.event === 'add') {
                layer.alert('编辑行：<br/>' + JSON.stringify(data))
            }
        });

        $('.out_bg').click(function () {
            $('.out_bg').hide();
            $('#look_div').hide();
        });

    });


</script>

</body>
</html>